<template>
  <div>
    <div class='basic-module'>
      <div class='basic-module-box'>
        <div class='box-title'>
          <h5 class='fl'>账户安全</h5>
        </div>
        <p>
          <label>当前账号ID：</label>
          <span>{{securityAccount.userId}}</span>
        </p>
        <p>
          <label>密码等级：</label>
          <span class='danger' v-if='securityAccount.passwordSecurityLevel==null|| securityAccount.passwordSecurityLevel==1'>低</span>
          <span class='warning' v-if='securityAccount.passwordSecurityLevel==2'>中</span>
          <span class='success' v-if='securityAccount.passwordSecurityLevel==3'>高</span>
          <b @click='revise(1)'>修改</b>
        </p>
        <p>
          <label>绑定手机号码：</label>
          <span>{{securityAccount.mobile}}</span>
          <b @click='revise(2)'>修改</b>
        </p>
        <p>
          <label>绑定邮箱：</label>
          <span>{{securityAccount.email == null?'无':securityAccount.email}}</span>
          <b @click='revise(3)'>修改</b>
        </p>
      </div>

      <div class='basic-module-box' v-if='person.userType==4||person.userType==3 ||person.userType==9'>
        <div class='box-title'>
          <h5 class='fl'>钱包概览</h5>
          <!--<el-button class='m-left10 fr' type='warning' plain  icon='el-icon-news' size='mini'  >申请信用额度</el-button>-->
        <!--  <el-button class='m-left10 fr' type='danger' plain  icon='el-icon-printer' size='mini'  >结算</el-button>-->
          <el-button class='m-left10 fr' type='success' plain  icon='el-icon-sold-out' size='mini' @click="openWithdrawCash" v-if="person.userType==4">提现</el-button>
          <!--<el-button class='m-left10 fr' type='primary' plain  icon='el-icon-goods' size='mini' >充值</el-button>-->
        </div>
        <p>
          <label>账户余额：</label>
          <span class='primary'>{{wallet.balance}}</span>元
        </p>
        <p>
          <label>冻结余额：</label>
          <span style="font-size: 24px;color: red;">{{wallet.freezeAmount}}</span>元
        </p>
        <p>
          <label>信用额度：</label>
          <span class='primary'>{{wallet.creditAmount}}</span>元
        </p>
      </div>

      <div class='basic-module-box' v-if='person.userType==4||person.userType==3 ||person.userType==9'>
        <div class='box-title'>
          <h5 class='fl'>企业信息</h5>
          <el-button type='primary' plain class='fr' icon='el-icon-edit' size='mini' @click='open_basic()' >编辑</el-button>
        </div>
        <p>
          <label>主体名称：</label>
          <span>{{enterpriseProfile.name}}</span>
        </p>
        <p>
          <label>账号ID：</label>
          <span>{{enterpriseProfile.userId}}</span>
        </p>
        <p>
          <label>注册时间：</label>
          <span>{{enterpriseProfile.registerTime|times}}</span>
        </p>
        <p>
          <label>联系人：</label>
          <span>{{enterpriseProfile.contact.name}}</span>
        </p>
        <p>
          <label>联系电话：</label>
          <span>{{enterpriseProfile.contact.mobile}}</span>
        </p>
        <p>
          <label>联系邮箱：</label>
          <span>{{enterpriseProfile.contact.email}}</span>
        </p>
        <p v-if="person.userType==4">
          <label>银行信息：</label>
          <span style="color: #1784ff">开户名称:{{enterpriseProfile.bankAccountName}}</span>
          <span >银行账号:{{enterpriseProfile.bankAccountNo}}<span style="color: red;">&nbsp;&nbsp;&nbsp;&nbsp;开户行:{{enterpriseProfile.bankName}}</span></span>
        </p>
        <p v-if="person.userType==4">
          <label>LOGO：</label>
          <img :src='enterpriseProfile.logoImagePath' :id='enterpriseProfile.logoImageId' class="imgBorder">
        </p>
        <p v-if="person.userType==4">
          <label>地图图标：</label>
          <img :src='enterpriseProfile.mapImgPath' :id='enterpriseProfile.mapImg' class="imgBorder">
        </p>
        <p v-if='(person.userType==3 || person.userType==9) &&enterpriseProfile.licenseImgPath'>
          <label>营业执照：</label>
          <img  :src='enterpriseProfile.licenseImgPath' :id='enterpriseProfile.licenseImg' class="imgBorder"/>
        </p>
        <p v-if='(person.userType==3 || person.userType==9) &&enterpriseProfile.organizationCodeImgPath'>
          <label>组织机构代码：</label>
          <img  :src='enterpriseProfile.organizationCodeImgPath' :id='enterpriseProfile.organizationCodeImg' class="imgBorder"/>
        </p>
        <p v-if='(person.userType==3 || person.userType==9) &&enterpriseProfile.threeCertificatesImgPath'>
          <label>三证合一：</label>
          <img  :src='enterpriseProfile.threeCertificatesImgPath' :id='enterpriseProfile.threeCertificatesImg' class="imgBorder"/>
        </p>
      </div>


    </div>
<!--基础信息修改-->
      <el-dialog title='基本信息修改' :visible.sync='dialogRoleVisible' width='50%' class='more-input-dialog'>
        <el-form  :model='roleForm' :rules='rules' ref='roleForm' label-width='100px' style="overflow: hidden;">
          <el-form-item label='登陆帐号' prop='userId'>
          <el-input placeholder='请输入企业名称' v-model='roleForm.userId' readonly></el-input>
          </el-form-item>
          <el-form-item label='企业名称'>
          <el-input placeholder='请输入企业名称' v-model='roleForm.name' readonly></el-input>
          </el-form-item>
          <el-form-item label='企业联系人' prop='concatName'>
            <el-input placeholder='请输入企业联系人' v-model='roleForm.concatName'></el-input>
          </el-form-item>

          <el-form-item label='联系电话' prop='mobile'>
            <el-input placeholder='请输入联系电话' v-model='roleForm.concatMobile'></el-input>
          </el-form-item>
          <el-form-item label='联系邮箱' prop='email'>
            <el-input placeholder='请输入联系电话' v-model='roleForm.concatEmail'></el-input>
          </el-form-item>

          <el-form-item label='' prop=''>
            <label>&nbsp;</label>
          </el-form-item>
          <el-form-item label='企业LOGO' prop='logoImagePath' v-if="roleForm.userType==4">
            <el-upload
              class='avatar-uploader'
              action=''
              :show-file-list='false'
              :on-success='handleAvatarSuccess'
              :http-request='doUploadLogo'
              :before-upload='beforeAvatarUpload'>
              <img v-if='roleForm.logoImagePath' :v-model='roleForm.logoImageId' :src='roleForm.logoImagePath' class='avatar' >
              <i v-else class='el-icon-plus avatar-uploader-icon'>LOGO</i>
            </el-upload>
          </el-form-item>

          <el-form-item label='地图图标' prop='mapLogoPath' v-if="person.userType==4">
          <el-upload
            class='avatar-uploader'
            action=''
            :show-file-list='false'
            :on-success='handleAvatarSuccess'
            :http-request='doUploadIdentity'
            :before-upload='beforeAvatarUpload'>
          <img v-if='roleForm.mapImgPath' :v-model='roleForm.mapImg' :src='roleForm.mapImgPath' class='avatar' >
          <i v-else class='el-icon-plus avatar-uploader-icon'>地图图标</i>
          </el-upload>
          </el-form-item>
          <el-form-item label='三证合一' prop='threeCertificatesImgPath' v-if="person.userType==3 || person.userType==9">
          <el-upload
            class='avatar-uploader'
            action=''
            :show-file-list='false'
            :on-success='handleAvatarSuccess'
            :http-request='doUploadThreeCert'
            :before-upload='beforeAvatarUpload'>
          <img v-if='roleForm.threeCertificatesImgPath' :v-model='roleForm.threeCertificatesImg' :src='roleForm.threeCertificatesImgPath' class='avatar' >
          <i v-else class='el-icon-plus avatar-uploader-icon'>三证合一</i>
          </el-upload>
          </el-form-item>
        </el-form>
        <div slot='footer' class='dialog-footer' style="background: #fff;">
          <el-button @click='cancel()' >取 消</el-button>
          <el-button  :disabled='isDisable'  type='primary'  @click='sub_basic(roleForm)'>确 定</el-button>
        </div>
      </el-dialog>
<!--绑定信息修改-->
    <el-dialog :title='textMap[dialogOption]' :visible.sync='dialogsafe'  width='40%' >
      <el-form  :model='roleForms' :rules='rulees' ref='roleForms' label-width='130px'>
        <div v-if='dialogOption=="password"'>
          <el-form-item label='原密码' prop='oldpassword'>
            <el-input type='password' placeholder='请输入原密码' v-model='roleForms.oldpassword'></el-input>
          </el-form-item>
          <el-form-item label='新密码' prop='password'>
            <el-input id='inp1' v-on:input ='paslev'   type='password' placeholder='请输入新密码' v-model='roleForms.password'></el-input>
          </el-form-item>

          <el-form-item label='重复密码' prop='repassword'>
            <el-input type='password' placeholder='请输入重复密码' v-model='roleForms.repassword'></el-input>
          </el-form-item>
        </div>

      <div v-if='dialogOption=="moblie"' >
        <el-form-item label='绑定手机号码' prop='mobile'>
          <el-input placeholder='请输入联系电话' v-model='roleForms.mobile'></el-input>
        </el-form-item>
      </div>

      <div  v-if='dialogOption=="emil"'>
        <el-form-item  label='绑定邮箱邮箱' prop='email'>
          <el-input placeholder='请输入联系电话' v-model='roleForms.email'></el-input>
        </el-form-item>
      </div>

      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='cancel()' >取 消</el-button>
        <el-button v-if='dialogOption=="password"'  :disabled='isDisable'  type='primary'  @click='subpas(roleForms)'>确 定</el-button>
        <el-button v-if='dialogOption=="moblie"'   :disabled='isDisable'  type='primary'  @click='submobile(roleForms)'>确 定</el-button>
        <el-button v-if='dialogOption=="emil"'   :disabled='isDisable'  type='primary'  @click='subemail(roleForms)'>确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog title='提现' :visible.sync='dialogWithdrawCashVisible' v-if='person.userType==4||person.userType==3' >
      <el-form label-width='100px' :rules='withDrawCashRules' ref='withdrawCash'  :model='withdrawCash' label-suffix=":">
        <el-form-item label='银行账号' label-width='120px'>
           <span style="color:#409EFF;">{{enterpriseProfile.bankAccountNo}}</span> <span style="color: #909399;">{{enterpriseProfile.bankName}}</span>
        </el-form-item>
        <el-form-item label='开户名' label-width='120px'>
          <span>{{enterpriseProfile.bankAccountName}}</span>
        </el-form-item>
        <el-form-item label='提现金额' prop="drawAmount" label-width='120px'>
          <el-input placeholder='请输入提现金额' style='width: 85%;' v-model='withdrawCash.drawAmount' required ></el-input>
          <p> <span class='primary'>账户可用余额：{{wallet.balance - wallet.freezeAmount}}</span>元
            <el-button type="text" @click="withdrawCash.drawAmount = wallet.balance  - wallet.freezeAmount ;">全部</el-button>
          </p>
        </el-form-item>
        <el-form-item label='备注说明' label-width='120px' prop='remark'>
          <el-input style='width: 85%;' type='textarea' v-model='withdrawCash.remark' placeholder='请输入提现备注说明'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='dialogWithdrawCashVisible = false;' >取 消</el-button>
        <el-button :disabled='isDisable' type='primary' @click='commitWithdrawCash()'>提 现</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<!--弹窗信息修改-->



<script>
import {
  allPersong,
  password,
  email,
  mobile,
  updateProfile,
 saveWithdrawCash
} from '@/api/personal';
import { uploadOss } from '@/api/image-oss';
import { getOSSProperties, insertImage } from '@/api/image';
import vail_ from '@/store/validation';
export default {
  data () {
    return {
      person: [],
      rulees: {
        oldpassword: [
          {
            required: true,
            message: '请输入原密码',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            validator: vail_.validatePass,
            trigger: 'blur'
          }
        ],
        repassword: [
          {
            required: true,
            validator: vail_.validatePassagin,
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            validator: vail_.phonevailable,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            validator: vail_.emailvailable,
            trigger: 'blur'
          }
        ]
      },
      roleForms: {},
      securityAccount: [],
      enterpriseProfile: [],
      wallet: [],
      logoPath: '',
      dialogRoleVisible: false,
      dialogsafe: false,
      dialogOption: '',
      roleForm: {},
      isDisable: false,
      textMap: {
        moblie: '绑定手机',
        emil: '绑定邮箱',
        password: '重置密码'
      },
      rules: {
        logoImagePath: [
          {
            required: true,
            message: '请上传logo',
            trigger: 'blur'
          }
        ],
        concatMobile: [
          {
            required: true,
            validator: vail_.phonevailable,
            trigger: 'blur'
          }
        ],
        concatName: [
          {
            required: true,
            message: '请输入联系人姓名',
            trigger: 'blur'
          }
        ],
        concatEmail: [
          {
            required: true,
            validator: vail_.emailvailable,
            trigger: 'blur'
          }
        ]
      },
      radio: 1,
      baseDir: 'person',
      dialogWithdrawCashVisible: false,
      withdrawCash: {
        drawAmount: '',
        remark: ''
      },
      withDrawCashRules: {
        drawAmount: [{
          validator: function(rule, value, callback) {
            if (value == null ||  value == ''){
              callback();
            }
            var patterns = /^\d+\.?\d{0,2}$/;
            if (patterns.test(value) && value > 0 && value <= 100000) {
              callback()
            } else if (value <= 0) {
              callback(new Error('提现金额必须大于0'))
            } else if (value > 100000) {
              callback(new Error('单次提现金额不得超过100000元'))
            } else if (!patterns.test(value)) {
              callback(new Error('请输入正确提现金额'))
            }
          },
          trigger: 'blur'
        }]
      }
    };
  },
  filters: {
    //过滤时间
    times: function (value) {
      var d = new Date(value);
      return (
        d.getFullYear() +
        '-' +
        (d.getMonth() + 1) +
        '-' +
        d.getDate() +
        ' ' +
        d.getHours() +
        ':' +
        d.getMinutes() +
        ':' +
        d.getSeconds()
      );
    }
  },
  methods: {
    //获取信息
    loadpersongal () {
      allPersong().then(response => {
        if (response.code !== 0) {
          this.$message({
            message: response.message,
            type: 'error'
          });
        } else {
          this.person = response.data;
          this.wallet = response.data.wallet;
          this.enterpriseProfile = response.data.enterpriseProfile;
          this.securityAccount = response.data.securityAccount;
        }
      })
    },
    //上传logo
    doUploadLogo (file) {
      var _this = this;
      getOSSProperties(this.baseDir).then(response => {
        if (response.code == 0) {
          uploadOss(response.data, file, function (url) {
            insertImage(url).then(res => {
              _this.roleForm.logoImageId = res.data.id;
              _this.roleForm.logoImagePath = _this.imageHost + res.data.path;
            });
          });
        } else {
          this.$message({
            message: response.message,
            type: 'error'
          });
        }
      });
    },
    //上传地图图标
    doUploadIdentity (file) {
      var _this = this;
      getOSSProperties(this.baseDir).then(response => {
        if (response.code == 0) {
          uploadOss(response.data, file, function (url) {
            insertImage(url).then(res => {
              _this.roleForm.mapImg = res.data.id;
              _this.roleForm.mapImgPath =
                _this.imageHost + res.data.path;
            });
          });
        } else {
          this.$message({
            message: response.message,
            type: 'error'
          });
        }
      });
    },
    //上传三证合一
    doUploadThreeCert (file) {
      var _this = this;
      getOSSProperties(this.baseDir).then(response => {
        if (response.code == 0) {
          uploadOss(response.data, file, function (url) {
            insertImage(url).then(res => {
              _this.roleForm.threeCertificatesImg = res.data.id;
              _this.roleForm.threeCertificatesImgPath =
                _this.imageHost + res.data.path;
            });
          });
        } else {
          this.$message({
            message: response.message,
            type: 'error'
          });
        }
      });
    },
    refuseMerchant () {},
    handleAvatarSuccess (res, file) {
      console.log(res);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传logo图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传logo图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },
    //  打开弹窗
    open_basic () {
      this.roleForm = {
        userId: this.enterpriseProfile.userId,
        name: this.enterpriseProfile.name,
        userType: this.person.userType,
        concatName: this.enterpriseProfile.contact.name,
        concatMobile: this.enterpriseProfile.contact.mobile,
        concatEmail: this.enterpriseProfile.contact.email,
        logoImageId: this.enterpriseProfile.logoImageId,
        logoImagePath: this.enterpriseProfile.logoImagePath,
        threeCertificatesImg: this.enterpriseProfile.threeCertificatesImg,
        threeCertificatesImgPath: this.enterpriseProfile.threeCertificatesImgPath,
        mapImg: this.enterpriseProfile.mapImg,
        mapImgPath: this.enterpriseProfile.mapImgPath
      }
      this.dialogRoleVisible = true;
    },
    //提交基本资料
    sub_basic (roleForm) {
      var _this = this;
      this.isDisable = true;
      setTimeout(() => {
        _this.isDisable = false;
      }, 2000);
      _this.$refs.roleForm.validate(valid => {
        if (valid) {
          updateProfile(roleForm).then(response=>{
            if(response.code==0){
              _this.$message({
                message: '保存成功',
                type: 'success'
              });
              _this.loadpersongal();
              _this.dialogRoleVisible = false;
            }else{
              _this.$message({
                message: response.message,
                type: 'error'
              });
            }
          });
        }
      });
    },
    // 账号安全
    revise (e) {
      var _this = this;
      if (this.$refs.roleForms !== undefined) {
        this.$refs.roleForms.resetFields();
      }
      if (e == 1) {
        //  修改密码
        _this.dialogOption = 'password';
      } else if (e == 2) {
        _this.dialogOption = 'moblie';
      } else {
        _this.dialogOption = 'emil';
      }
      _this.dialogsafe = true;
    },
    //修改密码
    subpas (roleForms) {
      var _this = this;
      _this.isDisable = true;
      setTimeout(() => {
        _this.isDisable = false;
      }, 2000);
      _this.$refs.roleForms.validate(valid => {
        if (valid) {
          password(roleForms).then(response => {
            console.log(response);
            if (response.code !== 0) {
              _this.$message({
                message: response.message,
                type: 'error'
              });
            } else {
              _this.loadpersongal();
              _this.dialogsafe = false;
            }
          });
        }
      });
    },
    //  修改手机号
    submobile (roleForms) {
      var _this = this;
      _this.isDisable = true;
      setTimeout(() => {
        _this.isDisable = false;
      }, 2000);
      _this.$refs.roleForms.validate(valid => {
        if (valid) {
          mobile(roleForms).then(response => {
            console.log(response);
            if (response.code !== 0) {
              _this.$message({
                message: response.message,
                type: 'error'
              });
            } else {
              _this.loadpersongal();
              _this.dialogsafe = false;
            }
          });
        }
      });
    },
    //修改邮箱
    subemail (roleForms) {
      var _this = this;
      _this.isDisable = true;
      setTimeout(() => {
        _this.isDisable = false;
      }, 2000);
      _this.$refs.roleForms.validate(valid => {
        if (valid) {
          email(roleForms).then(response => {
            console.log(response);
            if (response.code !== 0) {
              _this.$message({
                message: response.message,
                type: 'error'
              });
            } else {
              _this.loadpersongal();
              _this.dialogsafe = false;
            }
          });
        }
      });
    },
    //  判断密码级别
    paslev () {
      var pwd = document.getElementById('inp1').value;
      var level = 0;
      if (pwd.length >= 14) {
        level = 3;
      } else if (pwd.length < 14 && pwd.length >= 10) {
        level = 2;
      } else if (pwd.length < 10) {
        level = 1;
      }
      this.roleForms.level = level;
    },
    //  取消弹窗
    cancel () {
      this.dialogsafe = false;
      this.dialogRoleVisible = false;
    },
    //打开提现窗口
    openWithdrawCash () {
      if(this.enterpriseProfile.bankAccountNo!=null && this.enterpriseProfile.bankAccountNo!=''){
        this.dialogWithdrawCashVisible = true;
      }else{
        this.$message({
          type: 'error',
          message: '未登记银行卡信息暂不能提现，请联系平台登记银行卡信息'
        });
      }
    },
    commitWithdrawCash (){
      var _this = this;
      _this.$refs.withdrawCash.validate(valid => {
        if (valid) {
          if(_this.withdrawCash.drawAmount>_this.wallet.balance-_this.wallet.freezeAmount){
            this.$message({
              type: 'error',
              message: '提现金额不能大于钱包可用余额'
            });
            return false;
          }
          this.$confirm('提现申请后平台会在5个工作日内将本次提现金额转入该账户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              saveWithdrawCash(_this.withdrawCash).then(response => {
                if (response.code == 0) {
                  _this.$message({
                    message: '提现申请成功',
                    type: 'success'
                  });
                  _this.dialogWithdrawCashVisible = false;
                  this.loadpersongal();
                } else {
                  _this.$message({
                    message: response.message,
                    type: 'error'
                  });
                }
              });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消提现'
            });
          });
        } else {
          return false;
        }
      });
    }
  },
  created: function () {
    var _this = this;
    this.loadpersongal();
    getOSSProperties(this.baseDir).then(response => {
      _this.imageHost = response.data.showUrl;
    });
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  /*font-size: 28px;*/
  color: #8c939d;
  width: 133px;
  height: 133px;
  line-height: 133px;
  text-align: center;
}
.avatar {
  width: 133px;
  height: 133px;
  display: block;
}
.imgBorder {

}
</style>
